{/** $form=(new \extension\widget\widget\FormWidget)->toArray(); */}
<style>
    .form-widget table{
        width: 100%;
    }
    .form-widget table th{
        width: 20%;
    }
    .form-widget table td{
        width: 50%;
    }
</style>
<form action="{$form.action}" method="post" class="form-widget">
    <table>
        {foreach $form.fields as $key=>$field }
        <tr>
            <th><label for="{$field.code}">{$field.title}</label></th>
            <td>
                {if $field.type == 'textarea' }
                <textarea name="{$field.code}" id="{$field.code}" cols="30" rows="10" style="width: 100%">{$field.value}</textarea>
                {elseif $field.type == 'checkbox' }
                <input type="checkbox" name="{$field.code}" id="{$field.code}" value="on" {if $field.value}checked {/if}>
                {elseif $field.type == 'select' }
                <select name="{$field.code}" id="{$field.code}">
                    {foreach $field.options as $option }
                    <option value="{$option.code}" {if $option.active}selected {/if}>{$option.title}</option>
                    {/foreach}
                </select>
                {elseif $field.type == 'multi_select' }
                    {foreach $field.options as $option }
                    <input type="checkbox" name="{$field.code}[]" id="{$field.code}-{$option.code}" value="{$option.code}" {if $option.active}checked {/if}>
                    <label for="{$field.code}-{$option.code}">{$option.title}</label>
                    {/foreach}
                {elseif $field.type == 'number' }
                <input type="number" name="{$field.code}" id="{$field.code}" value="{$field.value}" style="width: 100%" >
                {elseif $field.type == 'range' }
                <input type="range" name="{$field.code}" id="{$field.code}" value="{$field.value}" style="width: 100%" {$field.attributes}>
                {elseif $field.type == 'datetime' }
                <input type="date" name="{$field.code}[date]" id="{$field.code}" value="{$field.value.date}" style="width: 40%" {$field.attributes}>
                <input type="time" name="{$field.code}[time]" id="{$field.code}" value="{$field.value.time}" style="width: 40%" {$field.attributes}>
                {elseif $field.type == 'datetime-local' }
                <input type="datetime-local" name="{$field.code}" id="{$field.code}" value="{$field.value}" style="width: 100%" {$field.attributes}>
                {else/}
                <input type="{$field.type}" name="{$field.code}" id="{$field.code}" value="{$field.value}" style="width: 100%">
                {/if}
            </td>
            <td style="width: 10%"></td>
        </tr>
        {/foreach}
    </table>
    {foreach $form.hiddens as $key=>$value }
    <input type="hidden" name="key" value="{$value}">
    {/foreach}
    <button type="submit">{$form.button}</button>
</form> 
